
body{
    margin: 0;
    padding: 0;
}
.box{
    background: url(./静态页面考核01/必应的素材/th.jpeg) no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 890px;  
    position: relative;
}
.header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
}
.thead{
    width: 80%;
    height: 100%;
    /* background: red; */
    display: flex;
    justify-content: space-between;
}
.nav{
    width: 40%;
    height: 100%;
    /* background: rgb(171, 240, 245); */
}
.nav>ul{
    list-style: none;
}
.nav>ul>li{
    list-style-type: none;
    float: left;
    padding: 0 15px;
    box-sizing: border-box;
    color: white;
    font-size: 15px;
    font-weight: bold;
}
.user{
    width: 9%;
    height: 100%;
    /* background: blue; */
    color: white; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
}
.userphoto{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.cic{
    width: 30px;
    height: 30px;
    background: #e1dcd8;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -21px -158px;
	width: 15px;
    height: 13px;
    border-radius: 50%;
}
.threewhite{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -170px -151px;
	width: 20px;
	height: 14px;
}
.seach{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sea{
    width: 86%;
    height: 50%;
    display: flex;
}

.left{
    width: 10%;
    height: 54%;
    display: flex;
    align-items: flex-end;
}
.left> .imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat 5px 20px;
	width: 140px;
    height: 85px;
}

.main{
    width: 50%;
    height: 50%;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    flex-direction: column;
}
.center{
    float: left;
    width: 160px;
    height: 45px;
}
    
  .col{
        transform:skew(-15deg);
}
.bg{
    width: 50px;
    height: 45px;
    background: white;
    float: left;
}
.bg1{
    width: 50px;
    background: #dddddd;
    height: 45px;
    float: right;
    margin-left: 60px;
    
}
.bg>div , .bg1>div{
    width: 100px;
    height: 45px;
    background: white;
    box-sizing: border-box;
    float: left;
    transform:skew(15deg);
    text-align: center;
    line-height: 45px;
}
.bg>div:nth-child(1){
    margin-left: 6px;
}
.bg1>div:nth-child(1){
    margin-left: 5px;
    background: #dddddd;
}
.right{
    width: 650px;
    height: 50px;
    background: white;
    border-radius: 0 5px 5px  5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow:antiquewhite;
}
.decoration{
    width: 50px;
    height: 50px;
    background: #efefef;
    border-radius: 0px 5px 5px  0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mirror{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -171px -66px;
	width: 25px;
	height: 25px;
}

.bottomer{
    width: 250px;
    height: 100px;
    position: absolute;
    bottom: 20px;
    right: 50px;
    /* background: rgb(228, 180, 180); */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cicle, .cicle1, .cicle2, .cicle3{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* background: #000; */
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cicle>.imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -15px -185px;
    width: 25px;
    color: white;
	height: 25px;
}
.cicle1>.imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -140px -71px;
	width: 7px;
	height: 12px;
}

.cicle2>.imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -100px -71px;
	width: 7px;
	height: 12px;
}
.cicle3>.imgbox{
    background: url('./静态页面考核01/必应的素材/hpc27.png') no-repeat -134px -109px;
	width: 20px;
	height:20px;
}

.footer{
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 30px;
    background: #323332;
    display: flex;
    justify-content: center;
}
.foo{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #646464;
}
.foo>ul{
    list-style: none;
}
.foo>ul>li{
    font-size: 14px;
    list-style-type: none;
    float: left;
    padding: 0px 10px;
    box-sizing: border-box;
    /* padding-top: -20px; */
}